<!--
    关于使用innerHTML
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书借阅管理</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        div.container{
            width: 100vw;
            background: #333;
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        header, footer{
            /*border: 1px solid black;*/
            text-align: center;
            width: 100%;
            line-height:50px;
            background: lightsteelblue;
            font-size: 30px;
        }
        main{
            width: 96%;
            background: gray;
            flex: 1;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        main>aside{
            width: 200px;
            height: 100%;
            background-color: lightslategray;
        }
        main>aside>li{
            margin: 10px;
            cursor: pointer;
        }
        main>aside>li.active{
            background-color: cornflowerblue;
        }
        main>section{
            flex: 1;
            padding: 10px;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            height: 100%;
        }
        main>section h2{
            border-bottom: 1px solid black;
        }
        table.bookList th,td{
            padding: 5px;
            width: max-width;
            text-align: center;
        }
        table.bookList td button{
            width: 90%;
            height: 100%;
        }
        table.bookList tr.active{
            background-color: rgba(0, 0, 0, .3);
        }
        
    </style>
</head>
<body>
    <div id="app">
        <bookmanga-cpn></bookmanga-cpn>
    </div>
    

    <script src="vue.js"></script>
    <script type="text/javascript">
        Vue.component('bookmanga-cpn',{
            data(){
                return{
                    bookData:[
                        //borrow:true 借出
                        //borrow:fasle 未借出
                        {bookId:1,name:'毛泽东传',price:99,press:'peking book',borrow:true},
                        {bookId:2,name:'周恩来传',price:90,press:'peking book',borrow:false},
                        {bookId:3,name:'邓小平传',price:90,press:'peking book',borrow:false},
                        {bookId:4,name:'朱德传',price:90,press:'peking book',borrow:true},
                        {bookId:5,name:'陈毅传',price:89,press:'peking book',borrow:false}
                    ],
                    currentCpn:'myBorrowCpn',

                    myBorrowBookData:[
                    // status: 0 为已归还;
                    // status: 1 为在读；
                    // status: 2 在我的书籍中删除;
                        {recordId:1,bookId:1,name:'毛泽东传',price:99,press:'peking book',status:1,time:'2022-02-01'},
                        {recordId:2,bookId:5,name:'陈毅传',price:89,press:'peking book',status:-1,time:'2022-02-01'},
                        {recordId:3,bookId:4,name:'朱德传',price:90,press:'peking book',status:1,time:'2022-02-01'},
                    ]
                }
            },
            template:`
            <div class="container">
                <header @click='show()'>Sample Book Cent Manga</header>
                <main>
                    <aside>
                        <li :class='{active:currentCpn==="bookListCpn"}' @click='currentCpn="bookListCpn"'>Book List</li>
                        <li :class='{active:currentCpn==="myBorrowCpn"}' @click='currentCpn="myBorrowCpn"'>My-BorrowBook</li>
                        <li :class='{active:currentCpn==="borrowRecordCpn"}' @click='currentCpn="borrowRecordCpn"'>Borrow Record</li>
                    </aside>
                    <section>
                        <keep-alive>
                        <!-- 动态绑定不能直接写，子组件名字，要在父组件的data中现定义一个变量，在赋值为子组件名 -->
                            <component 
                                :is='currentCpn' 
                                :bookData='bookData' 
                                :myBorrowBookData='myBorrowBookData'
                                @borrowFoo='borrowFoo'
                                @returnFoo='returnFoo'
                                @deleteFoo='deleteFoo'>
                            </component>
                        </keep-alive>
                    </section>
                </main>
                <footer>@ copyright all right reserved</footer>
            </div>
            `,
            computed:{
                
            },
            methods:{
                //测试
                show(){
                    console.log(this.bookData);
                    console.log(this.myBorrowBookData);
                    console.log('----------------');
                },
                //book list 借阅操作
                borrowFoo(borrowBookInfo){
                    // console.log(borrowBookInfo);
                    // console.log({...borrowBookInfo});
                    //修改书籍借阅状态（要在书籍数据里真实地址里修改）
                    this.bookData.forEach(item=>{
                        if(borrowBookInfo.bookId===item.bookId) item.borrow = true;
                    })

                    //添加借阅记录
                    //获取时间
                    let id = this.myBorrowBookData.length;
                    let date = new Date();
                    let month = date.getMonth();
                    let nowTime = date.getFullYear()+'-'+(++month)+'-'+date.getDate();

                    //添加借阅记录---记录借阅单号+ 书籍ID + 借阅时间+我的书籍
                    this.myBorrowBookData.push({
                        ...borrowBookInfo,
                        status:1,
                        recordId:++id,                        
                        time:nowTime
                    })
                },

                //myBorrow 组件操作
                //myBorrow 组件操作---return
                returnFoo(returnBookInfo){
                    //改我的书籍状态
                    this.myBorrowBookData = this.myBorrowBookData.map(item =>{
                        if (item.recordId === returnBookInfo.recordId) item.status = 0;
                        return item;
                    })
                    //改书籍库书籍状态
                    this.bookData = this.bookData.map(item =>{
                        if (item.bookId === returnBookInfo.bookId) item.borrow = false;
                        return item;
                    })
                },

                //myBorrow 组件操作
                //myBorrow 组件操作---delete
                deleteFoo(deleteBookInfo){
                    //删除我的书籍数据
                    this.myBorrowBookData = this.myBorrowBookData.map(item =>{
                        if (item.recordId === deleteBookInfo.recordId) item.status = -1;
                        return item;
                    })
                }
            },
        })
        Vue.component('bookListCpn',{
            props:{
                bookData:{
                    type:Array,
                    default:()=>[]
                }
            },
            template:`
                <div>
                    <h2>Book List</h2>
                    <table class="bookList">
                        <tr>
                            <th>BookId</th>
                            <th>B-name</th>
                            <th>B-price</th>
                            <th>B-press</th>
                            <th>Operation</th>
                        </tr>
                        <tr v-for='item in bookData' :class='{active:item.borrow}'>
                            <td>{{item.bookId}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.price}}</td>
                            <td>{{item.press}}</td>
                            <td>
                                <span v-if='item.borrow'>Borrowed</span>
                                <button v-else @click='$emit("borrowFoo",item)'>Borrow</button>
                            </td>
                        </tr>
                    </table>
                </div>
            `,
        })
        Vue.component('myBorrowCpn',{
            props:{
                myBorrowBookData:{
                    type:Array,
                    default:()=>[],
                }
            },
            template:`
                <div>
                    <h2>My Borrow Book List</h2>
                    <table class="bookList">
                        <tr>
                            
                            <th>B-name</th>
                            <th>B-price</th>
                            <th>B-press</th>
                            <th>Status</th>
                            <th>Operation</th>
                        </tr>
                        <tr v-for='item in myBorrowBookData' :class='{active:!item.status}'>
                        <!-- 判断是否被删除, // status: 0 为已归还;// status: 1 为在读；// status: -1 在我的书籍中删除;-->
                            <template v-if='item.status !== -1'>
                                <td>{{item.name}}</td>
                                <td>{{item.price}}</td>
                                <td>{{item.press}}</td>
                                <td>
                                    <span v-if='item.status'>onReading</span>
                                    <span v-else>Returned</span>
                                </td>
                                <td>
                                    <button v-if='item.status === 1' @click="$emit('returnFoo',item)">return</button>
                                    <button v-else @click="$emit('deleteFoo',item)">Delete</button>
                                </td>
                            </template>
                        </tr>
                    </table>
                </div>
            `,
        })
        Vue.component('borrowRecordCpn',{
            props:{
                myBorrowBookData:{
                    type:Array,
                    default:()=>[],
                }
            },
            template:`
                <div>
                    <h2>Borrow Record List</h2>
                    <table class="bookList">
                        <tr>
                            <th>Time</th>
                            <th>B-name</th>
                            <th>B-press</th>
                            <th>Status</th>
                        </tr>
                        <tr v-for='item in myBorrowBookData' :class='{active:item.status!==1}'>
                        <!-- 
                        // status: 0 为已归还;// status: -1 在我的书籍中删除;
                        //在此处，1就是在读，之外都是已归还！！
                        // status: 1 为在读；-->
                                <td>{{item.time}}</td>
                                <td>{{item.name}}</td>
                                <td>{{item.press}}</td>
                                <td>
                                    <span v-if='item.status===1'>onReading</span>
                                    <span v-else>Returned</span>
                                </td>
                        </tr>
                    </table>
                </div>
            `,
        })
        new Vue({
            el:'#app',            
        })
    </script>
</body>
</html>
